<template>
  <div class="log-interface">
    <!-- 搜索区域 -->
    <el-form :inline="true" class="search-bar" label-position="left">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="微服务">
            <el-select v-model="searchForm.agent" placeholder="--请选择--" style="width: 300px">
              <el-option label="agent:songs" value="songs"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="实例">
            <el-select v-model="searchForm.instance" placeholder="--请选择--" style="width: 300px">
              <el-option label="agent:songs" value="songs"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="接口">
            <el-input v-model="searchForm.endpoint" placeholder="PATH" style="width: 300px"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="时间范围">
            <el-date-picker style="width: 300px"
                            v-model="searchForm.timeRange"
                            type="datetimerange"
                            range-separator="To"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            value-format="YYYY-MM-DD HH:mm"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Trace ID">
            <el-input v-model="searchForm.traceId" placeholder="链路 ID"/>
          </el-form-item>
        </el-col>

        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>

      </el-row>
    </el-form>


    <!-- 日志列表 -->
    <el-timeline>
      <el-timeline-item
          v-for="(log, index) in logs"
          :key="index"
          :timestamp="log.timestamp"
          :color="log.level === 'ERROR' ? 'red' : 'gray'"
          placement="top"
      >
        <el-card>
          <div class="log-header">
            <span>Trace ID: <el-tag type="primary">{{ log.traceId }}</el-tag></span>
            <span>Span ID: <el-tag type="primary">{{ log.spanId }}</el-tag></span>
            <el-tag :type="log.level === 'ERROR' ? 'danger' : 'info'">{{ log.level }}</el-tag>
          </div>
          <div class="log-content">
            <pre>{{ log.content }}</pre>
          </div>
          <el-button text type="primary" @click="toggleDetail(index)">
            {{ log.showDetail ? '隐藏' : '显示' }}
          </el-button>
          <div v-if="log.showDetail" class="log-detail">
            <pre>{{ log.detailContent }}</pre>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import {Setting} from '@element-plus/icons-vue';

const activeTab = ref('log');
const searchForm = ref({
  agent: '',
  instance: '',
  endpoint: '',
  timeRange: ['', '']
});

const advanced = ref({
  traceId: '',
  tags: ''
});

const logs = ref([
  {
    timestamp: '2025-06-18 07:27:06.179',
    traceId: 'd4244d87-a03c-4c6d-8d88-d15165215756',
    spanId: 'XNIO-1 task-1',
    level: 'INFO',
    content: 'o.a.s.s.s.c.SongController - Listing top songs',
    detailContent: 'Detailed log information about song listing operation...',
    showDetail: false
  },
  // 可添加更多日志条目...
]);

const handleSearch = () => {
  // 实现搜索逻辑
};

const toggleDetail = (index) => {
  logs.value[index].showDetail = !logs.value[index].showDetail;
};
</script>

<style scoped>
.log-interface {
  padding: 20px;
}

.nav-tabs {
  margin-bottom: 20px;
}

.search-bar {
  margin-top: 10px;
  margin-bottom: 10px;
}

.log-header {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
}

.log-content pre,
.log-detail pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>
